import { Select } from "antd";
import mySettingConfig from "../../config/mySettingConfig";
import { TypeSet } from "../../config/TypeSet";
import {  hitokotoType } from "../../type/hitokoto";
import "./style.css";
const { Option } = Select;
const children: React.ReactNode[] = [...TypeSet]
.map((v)=><Option key={v}>{v}</Option>);

const hitokotoTypeChange = (value: string[]) => {
  mySettingConfig.myhitokotoType = new Set<hitokotoType>(value as hitokotoType[]);
};

const HitokotoTypeSelect: React.FC = () => {
    const style:React.CSSProperties = {
         display:"flex",
         flexDirection:"column",
         alignItems:"flex-start"
    }
    return (
  <div style={style}>
    <p style={{fontSize:"22px",marginLeft:"3px"}}>句子种类可选项:</p>
    <Select
      mode="multiple"
      allowClear
      style={{ width: '100%' }}
      placeholder="句子种类自定义"
      onChange={hitokotoTypeChange}
      defaultValue={['动画', '漫画','文学','原创',
      '影视','诗词','哲学']}
    >
      {children}
    </Select>
  </div>
)};

const curNumberChange = (value: string) => {
  console.log(`selected ${value}`);
  mySettingConfig.curNumber = Number(value);
};
const requestIntervalChange = (value: string) => {
  console.log(`selected ${value}`);
  mySettingConfig.requestInterval = Number(value);
};
export default function about(): JSX.Element {
  return (
    <div className="settingBox">
      <div className="selectBox">
        <div className="tiptext">卡片加载数量</div>
        <Select
          defaultValue={mySettingConfig.curNumber.toString()}
          style={{ width: 180 }}
          onChange={curNumberChange}
        >
          <Option value="3">3个</Option>
          <Option value="4">4个(推荐)</Option>
          <Option value="5">5个</Option>
          <Option value="6">6个</Option>
        </Select>
      </div>
      <div className="selectBox">
        <div className="tiptext">网络请求间隔</div>
        <Select
          defaultValue={mySettingConfig.requestInterval.toString()}
          style={{ width: 180 }}
          onChange={requestIntervalChange}
        >
          <Option value="250">0.25秒</Option>
          <Option value="500">0.5秒(推荐)</Option>
          <Option value="1000">1秒</Option>
        </Select>
      </div>
      <HitokotoTypeSelect/>
    </div>
  );
}
